<template>
	<div class="xjtuwennavbox">
		<div class="xjtuwennavtitle"><span>图文导航</span></div>
		<div class="xjtuwennavcontent">
			<div class="xjselectlink">
				<p>
					<el-select v-model="value" placeholder="请选择" @change="selectnav">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</p>
			</div>
			<div class="xjselectlink" v-for="(item,index) in tuwennav" :key="index">
				<p>
					<el-input v-model="item.text"></el-input>
				</p>
				<p>
					<el-button class="xjbutton" size="mini" @click="setbutton(index)">选择图标</el-button>
				</p>
				<p>
					<el-button size="mini" @click="setLink(index)">选择链接</el-button>
					<el-link type="primary" :href="item.url" class="ml-10"><span style="color:black;" v-if="item.title">链接：</span><span style="color:black;" v-if="!item.title">/</span>{{item.title}}</el-link>
				</p>
			</div>
		</div>
		<el-dialog title="选择图标" :visible.sync="dialogVisible" width="30%" :modal='false' style="margin-left: 15%;">
			<div class="avatar-uploader" @click="updateuploadimg">
				<img v-if="tuwennav[nowindex].src" :src="tuwennav[nowindex].src" class="avatar">
				<i v-else class="el-icon-plus avatar-uploader-icon"></i>
			</div>
			<p>
				<el-tag>只能上传jpg/png文件，且不超过1000kb</el-tag>
			</p>
			 <p>建议尺寸50*50像素的图片,<span style="color:red">点击上传图片然后保存才能生效</span></p>
			 <p><el-button class="xjbutton" size="small" @click="updateuploadimg">上传自定义图标</el-button></p>
			 <p class="sysspan"><span>系统图标</span></p>
			 <p class="sysbutton">
				<img style="width:50px;height:50px" v-for="item in iconform" :key="item.name" :src="item.src" alt="" @click="selectsysbtn(item)" >
			 </p>
			 <span slot="footer" class="dialog-footer">
                 <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
		</el-dialog>
		<uploadimage ref="uploadimagecom" v-on:childByImageValue="childByImageValue"></uploadimage>
		<xjsetlink ref="xjsetlinkcom" v-on:childByLinkValue="childByLinkValue"></xjsetlink>
	</div>
</template>

<script>
	import uploadimage from '@/components/common/uploadimage.vue';
	import xjsetlink from '@/components/shop/xjsetlink.vue';
	import {getSysButton,getshowuploadicon} from '../../api/index.js';
	export default {
		props: ["tuwennav"],
		components: {
			uploadimage,
			xjsetlink
		},
		data() {
			return {
				iconform:{},
				options: [{
					value: 3,
					label: '3列'
				}, {
					value: 4,
					label: '4列'
				}, {
					value: 5,
					label: '5列'
				}],
				value: 4,
				dialogVisible: false,
				sysbtnlist:[],
				nowindex:0,
			}
		},
		methods: {
			selectnav() {
				switch (this.value) {
					case 3:
						if(this.$parent.nowitem.tuwennavimg.length==4){
							this.$parent.nowitem.tuwennavimg.pop();
						}else if(this.$parent.nowitem.tuwennavimg.length==5){
							this.$parent.nowitem.tuwennavimg.splice(3,2);
						}
						break;
					case 4:
						if(this.$parent.nowitem.tuwennavimg.length==3){
						   this.$parent.nowitem.tuwennavimg.push({"text":"自定义4","name":"photo","src":"","purl":"","url":""});
						}else if(this.$parent.nowitem.tuwennavimg.length==5){
						   this.$parent.nowitem.tuwennavimg.pop();
						}
						break;
					case 5:
						if(this.$parent.nowitem.tuwennavimg.length==3){
							 this.$parent.nowitem.tuwennavimg.push({"text":"自定义4","name":"photo","src":"","purl":"","url":""});
							 this.$parent.nowitem.tuwennavimg.push({"text":"自定义5","name":"photo","src":"","purl":"","url":""});
						}else if(this.$parent.nowitem.tuwennavimg.length==4){
							 this.$parent.nowitem.tuwennavimg.push({"text":"自定义5","name":"photo","src":"","purl":"","url":""});
						}
						break;
			 }
			},
			setLink(index){
                this.nowindex=index;
				this.$refs.xjsetlinkcom.dialogVisible=true;
			},
			setbutton(index){
				this.nowindex=index;
				this.dialogVisible=true;
			},
			selectsysbtn(item){
				console.log(item)
				this.$parent.nowitem.tuwennavimg[this.nowindex].src=item.src;
				// this.$parent.nowitem.tuwennavimg[this.nowindex].name=item.name;
				// this.$parent.nowitem.tuwennavimg[this.nowindex].color=item.color;
				this.dialogVisible=false;
			},
			updateuploadimg() { //显示上传组件
				 this.$refs.uploadimagecom.dialogVisible = true;//显示上传对话框
			},
			childByImageValue: function(childValue) {
				 this.$parent.nowitem.tuwennavimg[this.nowindex].name="";
			     this.$parent.nowitem.tuwennavimg[this.nowindex].src=childValue;
			},
			childByLinkValue(childValue){
                this.$parent.nowitem.tuwennavimg[this.nowindex].title = childValue.title;
				this.$parent.nowitem.tuwennavimg[this.nowindex].url = childValue.url;
			},
			async query(){
				let rst=await getshowuploadicon()
				console.log(rst)
				this.iconform=rst.data
			}
		},
		computed:{

		},
		created() {
			this.query()
			getSysButton().then((res)=>{
				this.sysbtnlist=res.list;
			});
		}
	}
</script>

<style lang="scss">
	//@import "@/assets/css/common.scss";
	.xjtuwennavbox {
		width: 350px;
		display: flex;
		flex-direction: column;
		.avatar-uploader{
			border: 1px dashed #d9d9d9;
			border-radius: 6px;
			cursor: pointer;
			position: relative;
			overflow: hidden;
			width: 100px !important;
			height: 100px !important;
			text-align: center;
		}
		
		.avatar-uploader:hover {
			border-color: #409EFF;
		}
		
		.avatar-uploader-icon {
			font-size: 28px;
		    color: #8c939d;
			width: 50px;
			height: 50px;
			line-height: 100px;
		}
		
		.avatar {
			 width: 100px;
		     height: 100px;
			display: block;
		}
        .xjbutton{
        	background-color: $shenlv;
        	color: white;
        	display: inline-block;
        }
		.sysspan{
			font-size: 18px;
			font-weight: 600;
			margin-top:10px;
		}
		.sysbutton{
			margin-top:5px;
			.sysbtnpos{
				margin-right: 5px;
				margin-bottom: 5px;
			}
		}
		.xjtuwennavtitle {
			width: 100%;
			height: 30px;
			background-color: $danlv;
			border: 1px solid $qianlv;

			span {
				margin-left: 10px;
				font-size: 12px;
				line-height: 30px;
				color: $shenlv;
			}
		}

		.xjtuwennavcontent {
			width: 100%;
			// height: 100%;
			background-color: white;
			border: 1px solid $qianlv;

			.xjselectlink {
				margin-top: 20px;
				margin-bottom: 20px;

				p {
					margin-top: 3px;
					font-size: 12px;
					margin-left: 15px;
					input {
						height: 35px;
						width: 300px;
					}
				}

				
			}

			.van-uploader__wrapper {
				flex-direction: column;
			}

		}

	}
</style>
